@extends('layout.layout');

@section('title','分类')

@section('content')
    <style>
    #pages li{
        float: left;
        height: 20px;
        padding: 0 10px;
        display: block;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        outline: none;
        background-color: #444444;
        color: #fff;
        text-decoration: none;
        border-right: 1px solid #232323;
        border-left: 1px solid #666666;
        border-right: 1px solid rgba(0, 0, 0, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.15);
        -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.15);
        box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.15);
    }
    #pages .active{
        background-color: #c5d52b;
    }
    #pages .active span{
        color:black;
    }

    #pages {
        height:auto;
        overflow:hidden;
        margin:0px;
        padding:0px;
    }

    .pagination{
        padding:0px;
        margin:0px;
    }
</style>

<div class="mws-panel grid_8">
        <div class="mws-form-message error hide">
            
        </div>
        <div class="mws-form-message success hide">

        </div>
        <div class="mws-panel-header">
            <span><i class="icon-table"></i><font><font> 分类列表</font></font></span>
        </div>
        <div class="mws-panel-body no-padding">
          <div id="DataTables_Table_1_wrapper" class="dataTables_wrapper" role="grid">
            <form action="" >
                <div id="DataTables_Table_1_length" class="dataTables_length">
                <label><font><font>每页 </font></font>
                    <select size="1" name="num" aria-controls="DataTables_Table_1">
                        <option value="10" @if(!empty($data['num']) && $data['num'] ==10) selected @endif "><font><font>10</font></font></option>
                        <option value="25" @if(!empty($data['num']) && $data['num'] == 25) selected @endif ><font><font>25</font></font></option>
                        <option value="50" @if(!empty($data['num']) && $data['num'] == 50) selected @endif ><font><font>50</font></font></option>
                        <option value="100" @if(!empty($data['num']) && $data['num'] == 100) selected @endif ><font><font>100</font></font></option>
                    </select><font><font> 条</font></font>
                </label>
                </div>  
                <div class="dataTables_filter" id="DataTables_Table_1_filter">
                    <label><font><font>关键字： </font></font>
                    <input type="text" name="keywords" value="{{$data['keywords'] or ''}}" aria-controls="DataTables_Table_1"></label> 
                    <button class="btn btn-info btn-xs" type="submit">搜索</button>
                </div>
            </form>
	        <table class="mws-datatable-fn mws-table dataTable" id="DataTables_Table_1" aria-describedby="DataTables_Table_1_info">
	            <thead>
	                <tr role="row">
	                	<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 100px;">
	                		<font><font>ID</font></font>
	                	</th>
	                	<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 175px;">	<font><font>类名</font></font>
	                	</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 175px;">  <font><font>父级类名</font></font>
                        </th>
	                	<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 175px;">	<font><font>状态</font></font>
	                	</th>
	                	<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending" style="width: 260px;">	<font><font>操作</font></font>
	                	</th>
	                </tr>
	            </thead>
                            
	            <tbody role="alert" aria-live="polite" aria-relevant="all">
	                @foreach($cates as $k=>$v)
	                <tr class="@if($k % 2 == 0) odd @else even @endif ">
	                    <td class=" sorting_1"><font><font>{{$v['id']}}</font></font></td>
                        <td class=" "><font><font>{{$v['name']}}</font></font></td>
	                    <td class=" "><font><font>{{getCateNameById($v['pid'])}}</font></font></td>
	                    <td class=" "><font><font>
	                        <input uid="{{$v->id}}" class="ibutton" type="checkbox"  data-label-on="启用"  data-label-off="禁用" @if($v -> status == '1') checked="checked" @endif>
	                    </font></font></td>

	                    <td class=" "><font><font>
	                        <div style="width:120px;height:40px">
	                        <a class="btn btn-info btn-sm" style="float:left" href="/user/{{$v['id']}}/edit">修改</a>
	                        <form action="/user/{{$v['id']}}" method="post">
	                            <input type="hidden" name="_method" value="delete">
	                            {{csrf_field()}}
	                            <button class="btn btn-danger btn-sm" style="float:left" type="">删除</button>
	                        </form>
	                        </div>
	                        </font></font></td>
	                    
	                </tr>
	                @endforeach
	            </tbody>
        	</table>
                    
	           
	        </div>
	        </div>
	    </div>
                    
@endsection('content')
@section('css')
    <link rel="stylesheet" type="text/css" href="/admins/plugins/colorpicker/colorpicker.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/custom-plugins/picklist/picklist.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/plugins/select2/select2.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/plugins/ibutton/jquery.ibutton.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/plugins/cleditor/jquery.cleditor.css" media="screen">

    <!-- Required Stylesheets -->
    <link rel="stylesheet" type="text/css" href="/admins/bootstrap/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/css/fonts/ptsans/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/css/fonts/icomoon/style.css" media="screen">

    <link rel="stylesheet" type="text/css" href="/admins/css/mws-style.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/css/icons/icol16.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/css/icons/icol32.css" media="screen">

    <!-- Demo Stylesheet -->
    <link rel="stylesheet" type="text/css" href="/admins/css/demo.css" media="screen">

    <!-- jQuery-UI Stylesheet -->
    <link rel="stylesheet" type="text/css" href="/admins/jui/css/jquery.ui.all.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/jui/jquery-ui.custom.css" media="screen">

    <!-- Theme Stylesheet -->
    <link rel="stylesheet" type="text/css" href="/admins/css/mws-theme.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/admins/css/themer.css" media="screen">

@endsection

@section('js')
<!-- JavaScript Plugins -->
    <script src="/admins/js/libs/jquery-1.8.3.min.js"></script>
    <script src="/admins/js/libs/jquery.mousewheel.min.js"></script>
    <script src="/admins/js/libs/jquery.placeholder.min.js"></script>
    <script src="/admins/custom-plugins/fileinput.js"></script>
    
    <!-- jQuery-UI Dependent Scripts -->
    <script src="/admins/jui/js/jquery-ui-1.9.2.min.js"></script>
    <script src="/admins/jui/jquery-ui.custom.min.js"></script>
    <script src="/admins/jui/js/jquery.ui.touch-punch.js"></script>

    <script src="/admins/jui/js/globalize/globalize.js"></script>
    <script src="/admins/jui/js/globalize/cultures/globalize.culture.en-US.js"></script>

    <!-- Plugin Scripts -->
    <script src="/admins/custom-plugins/picklist/picklist.min.js"></script>
    <script src="/admins/plugins/autosize/jquery.autosize.min.js"></script>
    <script src="/admins/plugins/select2/select2.min.js"></script>
    <script src="/admins/plugins/colorpicker/colorpicker-min.js"></script>
    <script src="/admins/plugins/validate/jquery.validate-min.js"></script>
    <script src="/admins/plugins/ibutton/jquery.ibutton.min.js"></script>
    <script src="/admins/plugins/cleditor/jquery.cleditor.min.js"></script>
    <script src="/admins/plugins/cleditor/jquery.cleditor.table.min.js"></script>
    <script src="/admins/plugins/cleditor/jquery.cleditor.xhtml.min.js"></script>
    <script src="/admins/plugins/cleditor/jquery.cleditor.icon.min.js"></script>

    <!-- Core Script -->
    <script src="/admins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/admins/js/core/mws.js"></script>

    <!-- Themer Script (Remove if not needed) -->
    <script src="/admins/js/core/themer.js"></script>

    <!-- Demo Scripts (remove if not needed) -->
    <script src="/admins/js/demo/demo.formelements.js"></script>

@endsection

@section('myjs')
<script>
$(function(){
    $('.ibutton-container').click(function(){
        //获取元素,获取元素的状太
        var status = $(this).find('input')[0].checked ? '1' : '0';
        //获取id
        var id = $(this).find('input').attr('uid');
        //发送ajxa
        $.get('/cate/aupdate', {'status':status,'id':id},function(data){
            if(data==1){
                success('更新成功');
            }else{
                success('更新失败');
            }
        });    
    })

    function success(str)
    {   
        //将字符串放到div中
        $('.success').html(str);
        //显示元素
        $('.success').show();
        setTimeout(function(){
            $('.success').fadeOut();
        },3000);
    }
    function error(str)
    {   
        //将字符串放到div中
        $('.error').html(str);
        //显示元素
        $('.error').show();
        setTimeout(function(){
            $('.error').fadeOut();
        },3000);
    }
})  

</script>
@endsection